<template>
  <s-page custom-class="Toast-Page">
    <c-demo-block>
      <view class="btn-list">
        <s-button block @click="showToast">轻提示信息</s-button>
        <s-button block @click="showTopToast">居上显示</s-button>
        <s-button block @click="showBottomToast">居下显示</s-button>
        <s-button block @click="showSuccessToast">成功提示</s-button>
        <s-button block @click="showFailToast">失败提示</s-button>
        <s-button block @click="showLoading">loading</s-button>
        <s-button block @click="showMoreTextToast">多文字提示</s-button>
        <s-button block @click="showToastImage">图片提示</s-button>
      </view>
    </c-demo-block>
  </s-page>
</template>

<script>
import Toast from '@/uni_modules/s-ui/utils/toast';

export default {
  data: () => ({}),
  computed: {},
  methods: {
    showToast() {
      Toast('轻提示信息');
    },
    showTopToast() {
      Toast({
        message: '居上显示',
        position: 'top',
      });
    },
    showBottomToast() {
      Toast({
        message: '居下显示',
        position: 'bottom',
      });
    },
    showSuccessToast() {
      Toast.success('成功提示');
    },
    showFailToast() {
      Toast.fail('失败提示');
    },
    showLoading() {
      Toast.loading({
        message: '加载中...',
        duration: 2000,
      });
    },
    showMoreTextToast() {
      Toast('我与父亲不相见已二年余了，我最不能忘记的是他的背影。');
    },
    showToastImage() {
      Toast({
        icon: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1603365312,3218205429&fm=26&gp=0.jpg',
        background: 'transparent',
        iconStyle: {
          fontSize: '200rpx',
          borderRadius: '10rpx',
          overflow: 'hidden',
        },
      });
    },
  },
  onLoad() {
  },
};
</script>

<style lang="scss">
.Toast-Page {
  padding: 0 $padding-md;
  .btn-list {
    ::v-deep {
      .s-button {
        margin-bottom: 20rpx;
      }
    }
  }
}
</style>
